<template>
    <div>
        <detail-banner 
            :sightName="sightName" 
            :bannerImg="bannerImg" 
            :galleryImgs="galleryImgs"
        >
        </detail-banner>
        <detail-list :list="list"></detail-list>
    </div>
</template>
<script>
import axios from "axios"
import DetailBanner from "components/detail/Banner"
import DetailList from "components/detail/List"

export default {
    name:"Detail",
    data (){
       return{
        sightName:"",
        bannerImg:"",
        galleryImgs:[],
        list:[]
       }
    },
    components:{
        DetailBanner,
        DetailList
    },
    methods:{
       getDetailInfo (){
          axios.get("/api/travel/detail.json",{
              params:{
                  id:this.$route.params.id
              }
          })
          .then(this.getDetailInfoSucc)
       },
       getDetailInfoSucc (res){
            res=res.data
            if (res.ret && res.data){
                const data=res.data
                this.sightName=data.sightName
                this.bannerImg=data.bannerImg
                this.galleryImgs=data.gallaryImgs
                this.list=data.categoryList
            }
       }
    },
    mounted (){
      this.getDetailInfo()
    }
}
</script>
<style lang="scss" scoped>

</style>

